<template>
    <div class='content'>
        <div class="profile_page">
                <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
        </div>
        <div class="myInfo" v-if='userInfo.appPersonVo'>
            <div class="infoTop" >
                    <div>
                      <!--  <img v-if="photo==null" src="@/assets/images/img/set_person.png" alt="">
                        <img v-if="photo!=null" :src="photo" alt="">-->
                      <div id="demo">
                        <!-- 遮罩层 -->
                        <div class="container" v-show="panel">
                          <div>
                            <img id="image" :src="url" alt="Picture" ref="cropperImg">
                            <!--<img v-if="photo!=null&&url==''" :src="photo" alt="" id="image">-->
                          </div>
                          <button type="button" id="button" @click="commit">确定</button>
                          <button type="button"id="cancel" @click="cancel">取消</button>
                        </div>

                        <div>
                          <div class="show">
                            <img v-if="url!=''" class="picture" :src="url">
                            <img v-if="url==''&&photo!=null" class="picture" :src="photo">
                            <img v-if="url==''&&photo==null" class="picture" src="@/assets/images/img/set_person.png">
                          </div>
                          <div class="fileCheck">
                            <input type="file" id="change" accept="image" @change="change">
                            <label for="change"></label>
                          </div>

                        </div>
                      </div>
                      <p>{{userInfo.appPersonVo.name}}</p>
                    </div>
            </div>
            <div class="infoContent">
                    <titlebar :titleLeft='titleLeft'></titlebar>
                    <ul>
                        <li><span class="label">姓名</span>：<span>{{userInfo.appPersonVo.name}}</span></li>
                        <li><span class="label">性别</span>：<span>{{sex}}</span></li>
                        <li><span class="label">年龄</span>：<span>{{age}}</span></li>
                        <li><span class="label">婚姻状况</span>：<span>{{marryStatus}}</span></li>
                        <li><span class="label">最高学历</span>：<span>{{userInfo.appPersonVo.education}}</span></li>
                        <li><span class="label">工龄</span>：<span>{{userInfo.appPersonVo.workYear}}</span></li>
                        <li><span class="label">证件类型</span>：<span>{{idType}}</span></li>
                        <li><span class="label">证件号码</span>：<span>{{userInfo.appPersonVo.idNum}}</span></li>
                        <li><span class="label">联系方式</span>：<span>{{userInfo.appPersonVo.contactWay}}</span></li>
                        <li><span class="label">邮箱</span>：<span>{{userInfo.appPersonVo.email}}</span></li>
                    </ul>
                     <titlebar :titleLeft='titleLeft1'></titlebar>
                    <ul class="multirecord">
                         <li v-for="(personStudyVo,key) in personstudy" :key='key'>
                             <div >
                                 <p class="time">{{personStudyVo.startTime}} - {{personStudyVo.endTime}}</p>
                                 <p>{{personStudyVo.school}}</p>
                                 <p>{{personStudyVo.education}}&nbsp;&nbsp;&nbsp;&nbsp;{{personStudyVo.major}}</p>
                             </div>
                         </li>
                          <!-- <li>
                             <div>
                                 <p class="time">2015.09.09 - 2016.09.09</p>
                                 <p>北京理工大学</p>
                                 <p>本科&nbsp;&nbsp;&nbsp;&nbsp;计算机</p>
                             </div>
                         </li> -->
                    </ul>
                      <titlebar :titleLeft='titleLeft2'></titlebar>
                    <ul class="multirecord">
                         <li v-for="(certificateInformationVo,key) in userInfo.certificateInformationVos" :key='key'>
                             <div>
                                 <p class="time">{{certificateInformationVo.a285206}}</p>
                                 <p>&nbsp;</p>
                             </div>
                         </li>
                    </ul>
            </div>
        </div>

    </div>
</template>

<script>
    import headTop from '@/components/header/head'
    import Calendar from '@/components/calendar/calendar';
    import titlebar from '@/components/titlebar2/titlebar2';
    import Cropper from "cropperjs";
    import {getUser,dictNum,uploadFile,uploadAvatar} from '@/service/getData';
    import {mapState, mapMutations} from 'vuex'
    import {getStore,getDefault} from '@/assets/config/mUtils';
    export default {
      data() {
        return {
          profiletitle: '员工信息',
          goBack: true,
          userInfo: '',
          titleLeft: '基本信息',
          titleLeft1: '学历信息',
          titleLeft2: '证书信息',
          age: 0,
          sex: '',
          marryStatus: '',
          idType: '',
          maxeducation: '',
          personstudy: [],
          photo: '',

          /*头像上传数据*/
          headerImage: "",
          picValue: "",
          cropper: "",
          croppable: false,
          panel: false,
          url: '',
          imgCropperData: {
            accept: "image/gif, image/jpeg, image/png, image/jpg"
          }
        }
      },
      mounted() {
        var data = getDefault();
        getUser(data).then(res => {
          console.log(res);
          this.USERINFO(res.data);
          this.userInfo = res.data;
          var sexDict = res.data.appPersonVo.sex;
          var marryDict = res.data.appPersonVo.maritalStatus;
          var maxeducation = res.data.appPersonVo.education;
          var idTypeDict = res.data.appPersonVo.idType;
          this.photo = res.data.appPersonVo.photo;
          this.age = Math.ceil(res.data.appPersonVo.age);
          /*学历信息翻译*/
          this.personstudy = res.data.personStudyVos;
          //this.personstudy =[{education: "0365000332",endTime: "xxxx-xx-xx",id: "JHWY20180604875",major: "-",school: "-",startTime: "xxxx-xx-xx",subid: "D6C0382EC283405096EE585C45D40BBE"}];
          if (this.personstudy != null && this.personstudy.length > 0) {
            for (var i = 0; i < this.personstudy.length; i++) {
              var curstudy = this.personstudy[i];
              var schoolDict = curstudy.school;
              var eduDict = curstudy.education;
              var majorDict = curstudy.major;
              dictNum(schoolDict, data).then(res => {
                console.log(res);
                curstudy.school = res.data;
              });
              dictNum(eduDict, data).then(res => {
                console.log(res);
                curstudy.education = res.data;
              });
              dictNum(majorDict, data).then(res => {
                console.log(res);
                curstudy.major = res.data;
              });
            }
          }
          /*性别翻译*/
          dictNum(sexDict, data).then(res => {
            this.sex = res.data;
          });
          /*婚姻状态*/
          dictNum(marryDict, data).then(res => {
            this.marryStatus = res.data;
          });
          /*证件类型*/
          dictNum(idTypeDict, data).then(res => {
            //console.log(res);
            this.idType = res.data;
          });
          /*最高学历*/
          dictNum(maxeducation, data).then(res => {
            //console.log(res);
            this.maxeducation = res.data;
          });
        });


          //初始化这个裁剪框
        this.$nextTick( ()=> {
          setTimeout(()=>{
            var self = this;
            var image = document.getElementById('image');
            this.cropper = new Cropper(image, {
              aspectRatio: 1,
              viewMode: 1,
              highlight:true,
              movable:true,
              background:false,
              zoomable:false,
              modal:true,
              ready: function () {
                self.croppable = true;
              }
            });
          },1000);

        });


      },
      components: {
        headTop,
        Calendar,
        titlebar
      },
      methods: {
        ...mapMutations([
          'USERINFO',
        ]),
        clickDay(data) {
          console.log(data); //选中某天
        },
        changeDate(data) {
          console.log(data); //左右点击切换月份
        },

        //取消上传
        cancel() {
          this.panel = false;
          var obj = document.getElementById('change');
          obj.outerHTML = obj.outerHTML;
        },
        //创建url路径
        getObjectURL(file) {
          var url = null;
          if (window.createObjectURL != undefined) {
            // basic
            url = window.createObjectURL(file);
          } else if (window.URL != undefined) {
            // mozilla(firefox)
            url = window.URL.createObjectURL(file);
          } else if (window.webkitURL != undefined) {
            // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
          }
          return url;
        },
        //input框change事件，获取到上传的文件
        change(e) {
          let files = e.target.files || e.dataTransfer.files;
          if (!files.length) return;
          let type = files[0].type; //文件的类型，判断是否是图片
          let size = files[0].size; //文件的大小，判断图片的大小
          if (this.imgCropperData.accept.indexOf(type) == -1) {
            alert("请选择我们支持的图片格式！");
            return false;
          }
          if (size > 5242880) {
            alert("请选择5M以内的图片！");
            return false;
          }
          this.picValue = files[0];
          this.url = this.getObjectURL(this.picValue);
          //每次替换图片要重新得到新的url
          if (this.cropper) {
            this.cropper.replace(this.url);
          };
          this.panel = true;
          e.target.value = '';
        },
        //确定提交
        commit() {
          this.panel = false;
          var croppedCanvas;
          var roundedCanvas;
          if (!this.croppable) {
            return;
          }
          // Crop
          croppedCanvas = this.cropper.getCroppedCanvas();
          // Round
          roundedCanvas = this.getRoundedCanvas(croppedCanvas);
          console.log(roundedCanvas);
          this.headerImage = roundedCanvas.toDataURL();
          //上传图片
          this.postImg();
        },
        //canvas画图
        getRoundedCanvas(sourceCanvas) {
          var canvas = document.createElement("canvas");
          var context = canvas.getContext("2d");
          var width = sourceCanvas.width;
          var height = sourceCanvas.height;
          canvas.width = width;
          canvas.height = height;
          context.imageSmoothingEnabled = true;
          context.drawImage(sourceCanvas, 0, 0, width, height);
          context.globalCompositeOperation = "destination-in";
          context.beginPath();
          context.arc(
            width / 2,
            height / 2,
            Math.min(width, height) / 2,
            0,
            2 * Math.PI,
            true
          );
          context.fill();
          return canvas;
        },
        //提交上传函数
        postImg() {
          console.log(this.headerImage);
          //console.log(file.file.name);
          var formData = {};
          formData.data = this.headerImage;
          formData.app_userId = getStore('user_id');
          formData.CHECK_TIME = new Date().getTime().toString();
          formData.CHECK_SIGN = this.$md5(formData.app_userId + formData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
          //formData.append("uploadFile", file);
          uploadAvatar(formData).then(res=>{
           console.log(res);
          })
        }
        }
    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';
    @import '../../assets/style/public';
    .myInfo{
        padding: .4rem;
        .infoTop{
            width: 100%;
            height: 5.64rem;
            background: url('../../assets/images/img/infoBg.png') no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: .4rem;
            div{
                text-align: center;
                img{
                   /* width: 2.2rem;
                    height: 2.2rem;
                    border-radius: 50%;*/
                }
                p{
                    font-size: .6rem;
                    color: #fff;
                    margin-top: .3rem;
                }
            }
        }
        .infoContent{

            font-size: .48rem;
            color: #717171;
            line-height: 1.2rem;
            ul{
                background: #fff;
                padding: 0.5rem 0;
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
                margin-bottom: .4rem;
                li{
                    padding-left: .9rem;
                    .label{
                        display: inline-block;
                        width: 2.4rem;
                        text-align: justify;
                        text-align-last: justify;
                        color: #4e4e4e;
                    }
                    div{
                        padding-bottom: 1rem;
                        p{
                            color: #555;
                            font-size: .56rem;
                            line-height: 1.12rem;
                            &.time{
                                color: #666;
                            }
                        }
                    }
                }
                &.multirecord{
                    padding-left: 1.2rem;
                    position: relative;
                    overflow: hidden;
                    &::after{
                        content: '';
                        position:absolute;
                        width: 2px;
                        height: 100%;
                        background: #eaefff;
                        top: 1rem;
                        left: 1.2rem;

                    }
                    li{
                        position: relative;
                        &:before{
                            background-color: #cad9ff;
                            content: '';
                            display: inline-block;
                            width: .56rem;
                            height: .56rem;
                            position: absolute;
                            border-radius: 50%;
                            left: -.2rem;
                            z-index: 10;
                            top: .3rem;
                        }
                        &::after{
                            background-color: #83a5ff;
                            content: '';
                            display: inline-block;
                            width: .36rem;
                            height: .36rem;
                            position: absolute;
                            border-radius: 50%;
                            left: -.1rem;
                            z-index: 10;
                            top: .4rem;
                        }
                    }
                }
            }
        }
    }

  /*图片上传样式*/
    #demo{
      height: 2.5rem;
    }
    #demo #button,#demo #cancel {
      position: absolute;
      right: 10px;
      top: 110px;
      width: 60px;
      height: 30px;
      border: none;
      border-radius: 5px;
      background: white;
      font-size: 14px;
    }
    #demo #cancel{left:10px;}
    #demo .show {
      width: 2.2rem;
      height: 2.2rem;
      overflow: hidden;
      position: relative;
      border-radius: 50%;
      /*border: 1px solid #d5d5d5;*/
      left: 50%;
      margin-left: -1.1rem;
      margin-top: 18px;
    }
    #demo .picture {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    #demo .container {
      z-index: 99;
      position: fixed;
      padding-top: 200px;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 1);
    }
    #demo #image {
      max-width: 100%;
    }
    .cropper-view-box,
    .cropper-face {
      border-radius: 50%;
    }
    /*!
     * Cropper.js v1.0.0-rc
     * https://github.com/fengyuanchen/cropperjs
     *
     * Copyright (c) 2017 Fengyuan Chen
     * Released under the MIT license
     *
     * Date: 2017-03-25T12:02:21.062Z
     */

    .fileCheck{
      width: 2.2rem;
      height: 2.2rem;
      overflow: hidden;
      position: relative;
      border-radius: 50%;
    /*  border: 1px solid #d5d5d5;*/
      left: 50%;
      margin-left: -1.1rem;
      top: -54px;
      z-index: 9;

    }
  #change{
    width: 2.2rem;
    height: 2.2rem;
    padding-left: 2.2rem;
    display: block;
    font-size: 0;
  }
</style>
